<template>
  <div class="header-wrapper">
    <div class="header-content">
      <div class="middle">
        <div class="info">
          <div class="item">
            <span class="icon icon-tv"></span>主页
          </div>
          <div class="item">画友</div>
          <div class="item">游戏中心</div>
          <div class="item">直播</div>
          <div class="item">周边</div>
          <div class="item">萌战</div>
        </div>
        <div class="user">
          <div v-if="isLogin">
            <div class="item">消息</div>
            <div class="item">动态</div>
            <div class="item">收藏夹</div>
            <div class="item">历史</div>
            <div class="item">投稿</div>
          </div>
          <div v-if="!isLogin">
            <div class="item" @click="userLogin">登录</div>
            <div class="item" @click="userAdd">注册</div>
          </div>
        </div>
      </div>
    </div>


    <div class="header-bg">
      <img class="bg-img" width="100%" src="http://oiq23viaf.bkt.clouddn.com/banner.png">
    </div>

    <el-dialog title="注册" v-model="addFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="邮箱" prop="username">
          <el-input v-model="addForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="addForm.password" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="是否填写具体信息">
          <el-switch
            v-model="showInfo"
            on-color="#13ce66"
            off-color="#ff4949">
          </el-switch>
        </el-form-item>

        <template v-if="showInfo">
        <el-form-item label="昵称" prop="name">
          <el-input v-model="addForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="addForm.sex">
            <el-radio class="radio" :label="1">男</el-radio>
            <el-radio class="radio" :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
        </el-form-item>



        <el-form-item label="生日">
          <el-date-picker type="date" placeholder="选择日期" v-model="addForm.birth"></el-date-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input type="textarea" v-model="addForm.addr"></el-input>
        </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>


    <el-dialog title="登录" v-model="loginFormVisible" :close-on-click-modal="false">
      <el-form :model="loginForm" label-width="80px" :rules="loginFormRules" ref="loginForm">
        <el-form-item label="账号" prop="username">
          <el-input v-model="loginForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="loginFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="loginSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
        return{
          isLogin: false,
          showInfo: false,
          addLoading: false,
          addFormVisible: false,//新增界面是否显示
          loginFormVisible: false,//登录界面是否显示

          addFormRules: {
            username: [
              { required: true, message: '请输入账号', trigger: 'blur' },
              { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
            ],
            name: [
              { required: true, message: '请输入姓名', trigger: 'blur' }
            ]
          },

          loginFormRules: {
            username: [
              { required: true, message: '请输入账号', trigger: 'blur' },
              { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
            ]
          },
          //新增界面数据
          addForm: {
            username: '',
            password: '',
            name: '',
            sex: -1,
            age: 0,
            birth: '',
            addr: ''
          },
          loginForm:{
              username: '',
              password: ''
          }
        }
    },
    methods: {
      userAdd: function () {
        this.addFormVisible = true;
        this.addForm = {
          name: '',
          sex: -1,
          age: 0,
          birth: '',
          addr: ''
        };
      },
      userLogin: function(){
        this.loginFormVisible = true;
        this.addForm = {
          name: '',
        };
      },
      addSubmit: function () {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              console.log('ss');
            });
          }
        });
      },
      loginSubmit: function(){
          var _this = this;
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              _this.isLogin = true;
            });
          }
        });
      }
    }
  };
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../common/scss/mixin";

  .header-wrapper{
    position: relative;
    width: 100%;
    height: 170px;
    .header-content{
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 56px;
      background-color: rgba(255,255,255,0.4);
      z-index:3;
      .middle{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 0 auto;
        width: 1160px;
        height: 100%;
        line-height: 56px;
        font-size: 13px;
        color: #222;
        .info{
          .item{
            display: inline-block;
            cursor: pointer;
            padding: 0 15px;
            &:hover{
              background-color: rgba(255,255,255,0.4);
            }
            .icon{
              margin-right: 4px;
              color: #20A0FF;
            }
          }
        }
        .user{
          .item{
            display: inline-block;
            cursor: pointer;
            padding: 0 15px;
            &:hover{
              background-color: rgba(255,255,255,0.4);
            }
            .icon{
              margin-right: 4px;
              color: #20A0FF;
            }
          }
        }
      }
    }
    .header-bg{
      width:100%;
      height: 170px;
      overflow: hidden;
      .bg-img{
        width:100%;
        height: 170px;
        min-width: 1160px;
      }
    }
    .mask-bg{
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
      width:100%;
      height: 56px;
      min-width: 1160px;
      z-index: 2;
      filter:blur(10px)
    }
  }
</style>
